<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 1226px;
				height: 460px;
				/*border: 2px solid red;*/
				outline: 2px solid red;
				position: relative;
			}
			#box img{
				width: 1226px;
				height: 460px;
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
			}
			#box ul{
				width: 400px;
				height: 50px;
				position: absolute;
				bottom: 0px;
				right: 0px;
			}
			#box ul li{
				list-style: none;
				float: left;
				margin-left: 20px;
				width: 40px;
				height: 40px;
				background: grey;
				border-radius: 50%;
			}
			.active{
				background: red !important;
			}
		</style>
		
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
//				remove() 删除元素
				$('img').last().remove()
//				克隆元素
				var cc = $('img').last().clone()
				console.log(cc)
//				获取图片的长度
				var len = $('img').length;
				
				var li='';
				for(var a=0;a<len;a++){
					li+='<li></li>'
				}
//				向指定元素的里面插入元素
				$('#box').append('<ul>'+li+'</ul>')
				
				$('#box ul li').eq(0).addClass('active')
	//			创建变量
				var num = 0;
//				显隐函数
				function xy(){
//				         找到img 让相应的img显示其他的兄弟元素名字叫img的隐藏
					$('#box img').eq(num).fadeIn(300).siblings('img').fadeOut(300)
	//				找点li标签 让相应li标签添加class其他的兄弟元素移出掉class
					$('ul li').eq(num).addClass('active').siblings().removeClass('active')
				}
				
				
	//			定时器函数
				function run(){
					num++;
					if(num>3){
						num=0;
					}
//					调用显隐函数
					xy();
	
				}
	//			设置定时器
				var timer = setInterval(run,2000)
				
	//			添加移入移出事件
				$('#box').hover(function(){
	//				清理定时器
					clearInterval(timer)
				},function(){
	//				回复定时器
					timer = setInterval(run,2000)
				})
				
//				给小点添加点击事件
				$('ul li').click(function(){
//					获取当前元素序号
					num = $(this).index();
//					调用显隐函数
					xy();
					
				})
				
				
			})
			
		</script>
	</head>
	<body>
		<div id="box">
			<img style="display: block;" src="img/m1.jpg"/>
			<img src="img/m2.jpg"/>
			<img src="img/m3.jpg"/>
			<img src="img/m4.jpg"/>
			<img  src="img/m1.jpg"/>
			<img src="img/m2.jpg"/>
			<img src="img/m3.jpg"/>
		</div>
	</body>
</html>
